<template>
  <el-container style="height: 100%;">
    <el-header style="background: #409eff; display: flex; align-items: center;">
        <h3 style="margin-bottom: 0; color: #fff;">XXX系统</h3>
    </el-header>
    <el-container>
        <el-aside width="220px" style="border-right: solid 1px #e6e6e6;">
            <el-menu router style="border-right: none;">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-message"></i>系统管理</template>
                    <el-menu-item  @click="addToContent('/index/user', '用户管理')">
                        <i class="el-icon-goods"></i>用户管理
                    </el-menu-item>
                    <el-menu-item @click="addToContent('/index/role', '角色管理')">
                        <i class="el-icon-s-goods"></i>角色管理
                    </el-menu-item>
                    <el-menu-item @click="addToContent('/index/perm', '权限管理')">
                        <i class="el-icon-s-goods"></i>权限管理
                    </el-menu-item>
                    <el-menu-item index="5">
                        <i class="el-icon-s-goods"></i>操作日志
                    </el-menu-item>
                    <el-submenu index="9">
                         <template slot="title"><i class="el-icon-message"></i>邮箱管理</template>
                         <el-menu-item index="6">
                            <i class="el-icon-goods"></i>公司邮箱
                        </el-menu-item>
                        <el-menu-item index="7">
                            <i class="el-icon-s-goods"></i>个人邮箱
                        </el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-message"></i>商品信息</template>
                    <el-menu-item  @click="addToContent('/index/user', '用户管理')">
                        <i class="el-icon-goods"></i>广告管理
                    </el-menu-item>
                    <el-menu-item  @click="addToContent('/index/user', '用户管理')">
                        <i class="el-icon-goods"></i>分类管理
                    </el-menu-item>
                    <el-menu-item @click="addToContent('/index/role', '角色管理')">
                        <i class="el-icon-s-goods"></i>品牌管理
                    </el-menu-item>
                    <el-menu-item @click="addToContent('/index/perm', '权限管理')">
                        <i class="el-icon-s-goods"></i>商品管理
                    </el-menu-item>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title"><i class="el-icon-message"></i>订单信息</template>
                    <el-menu-item  @click="addToContent('/index/user', '用户管理')">
                        <i class="el-icon-goods"></i>订单管理
                    </el-menu-item>
                    <el-menu-item>
                        <i class="el-icon-goods"></i>支付流水
                    </el-menu-item>
                </el-submenu>
                <el-submenu index="4">
                    <template slot="title"><i class="el-icon-message"></i>用户信息</template>
                    <el-menu-item  @click="addToContent('/index/user', '用户管理')">
                        <i class="el-icon-goods"></i>用户管理
                    </el-menu-item>
                    <el-menu-item  @click="addToContent('/index/user', '用户管理')">
                        <i class="el-icon-goods"></i>地址管理
                    </el-menu-item>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-main style="padding: 0 10px 0 10px;">
            <el-tabs v-model="tabName" @tab-click="handleClick" type="card" closable @tab-remove="removeTab">
                <el-tab-pane v-for="t in tabs" :name="t.name" :label="t.title" :key="t.path"> 
                </el-tab-pane>
            </el-tabs>
            <router-view></router-view>
        </el-main>
    </el-container>
</el-container>
</template>

<script>
const pathData = ['/index/user', '用户管理', '/index/role', '角色管理', '/index/perm', '权限管理']
export default {
    data() {
        return {
            tabs: [],
            tabName: ''
        }
    },
    mounted() {
        let path = this.$route.path;
        let idx= pathData.indexOf(path)
        if(idx > -1) {
            this.addToContent(path, pathData[idx + 1])  
        }  
    },
    methods: {
        // 添加tab
        addToContent(path, title) {
            // 如果不存在对应的path, 就不添加
            if(!this.tabs.find(t => t.path == path)) {
                this.$router.push(path)
                this.tabName = path
                this.tabs.push({path, title, name: path})
            }else {
                this.tabName = path
                this.$router.push(path)
            }
        },
        // 删除某个tab
        removeTab(name) {
            // this.tabs.find(t => t.name == name) 找到名字对应的那个tab
            // this.tabs.indexOf() 表示获取到其在数组中所在的索引
            let idx = this.tabs.indexOf(this.tabs.find(t => t.name == name))
            // 如果只有一个
            if(idx == 0 && this.tabs.length == 1) {
                this.tabs.splice(0, 1)  // 删除掉，然后展示dashboard
                this.$router.push('/index/dashboard')
            }else if(idx == 0 && this.tabs.length > 1) {  
                this.tabName = this.tabs[1].name
                this.$router.push(this.tabs[1].path)  
                this.tabs.splice(0, 1)  // 删除掉第一个   
            }else if(idx > 0) {  // 如果删除的是其他部分，让它前一个点亮
                this.tabName = this.tabs[idx - 1].name
                this.$router.push(this.tabs[idx - 1].path) 
                this.tabs.splice(idx, 1)
            }
        },
        handleClick(tab) {
            let name = tab.name
            this.tabName = name;
            this.$router.push(name)
        }
    }
}
</script>

<style>

</style>